Создаем лендинг в Wix конструкторе

Лендингом называют специальную веб-страницу, созданную для продажи определенных товаров или «завлечения» пользователей на совершение каких-то действий (подписка, регистрация, заявка и т.п.). Чуть позже данное понятие стало синонимом для соответствующего типа сайтов, где вся информация размещается в пределах одной страницы. Подобные проекты можно считать альтернативой так называемым сайтам-визиткам, причем, как мне кажется, более эффективной. Сегодня будем пробовать создать в конструкторе Wix лендинг и рассмотрим ключевые моменты данного вопроса.

Реально в Web’е есть ниши, где все необходимые данные о компании можно вынести в один Landing page, красиво это оформить, избавившись от ненужных переходов по меню. Если вспомнить, рассмотренный ранее, проект OnePageLove с лучшими одностраничные дизайнами, то чаще всего там встречаются сайты портфолио, имиджевые, событийные, с информацией о конкретных продуктах/приложениях и т.п. Во всех них информации не особо много, акцент делается на нескольких ключевых моментах. Если это, например, проект портфолио, то автор добавляет примеры работ, контакты, информацию о себе, список услуг.

Чем меньше лишних отвлекающих элементов — тем эффективнее Landing page. Хотя, если целью сайта является раскрытие способностей веб-разработчика или иллюстратора, можно увидеть много креативных решений на сайте. С функциональностью у лендингов все нормально: для навигации зачастую используется анкорное меню сверху или сбоку, которое перенаправляет пользователя на те или иные места/блоки на странице; часть информации может подгружаться через скрипты со всплывающими окнами или слайдерами.

Создаем лендинг пейдж в Wix

Вдохновением для поста послужила интересная статья из блога Wix, где рассказывалось о том, как должна выглядеть идеальная лендинг страница. Там содержится парочка полезных советов по разработке красивых и эффективных Landing page, в частности:

Во-первых, страница не должна быть перегружена лишними элементами и она реально должна быть только одной (меню анкорное).
Вписывайте графику гармонично в общий дизайн сайта. Картинки подбирайте яркие и привлекательные: такие есть в любой сфере — туризм, заведения, еда и т.п.
Текст должен хорошо читаться, не следует использовать множество шрифтов — да, в Wix они легко добавляются, но ограничьтесь двумя-тремя.
Постарайтесь сформулировать парочку призывов к действию или завлекающих заголовков, если вам нужно продать товар/услугу. Можно добавить большие красивые кнопки «подписаться», «заказать», «получить» и т.п.

Используя данные советы, постараемся реализовать на Wix лендинг пейдж, который бы удовлетворял всем, описанным выше, критериям. Для этого первым делом переходим на сам конструктор сайтов по адресу ru.wix.com. Если вы еще не знакомы с ним, то можете почитать на сайте о возможностях сервиса и посмотреть имеющиеся шаблоны для своих проектов и т.п. Недавно, кстати, в Дизайн Мании была статья про новый редактор Wix где рассматривалось последние обновление системы.

Чтобы непосредственно начать работу над сайтом требуется зарегистрироваться (для удобства есть быстрый вход через Facebook и Google аккаунт). Далее в верхней панели выбираете один из своих существующих проектов или создаете с нуля.

Для нового сайта нужно будет подобрать соответствующий дизайн. В каталоге макетов Wix есть специальный раздел «Лендинги». Под каждым объектом найдете небольшое описание тематики, к которой он относится: приложение, софт, заглушка перед открытием, музыка.

Хотя, в принципе, вам не обязательно ограничивать себя этой категорией, а можно поискать макеты в других. Возможно, вас больше привлечет какой-то другой необычный дизайн, а сделать из него одностраничный Landing page в Wix — дело техники.

Если вы не знаете, что должно быть в лендинге, то можете посмотреть структуру макетов из соответствующей категории и перенести ее на обычный шаблон. Либо гляньте работы других разработчиков на том же OnePageLove или в галерее лендингов Land Book. Если будете создавать одностраничный сайт портфолио, то вот тут найдете парочку советов. Короче говоря, можно выбрать любой макет из каталога Wix и привести его к одностраничному. Это не сложно. Мы, например, решили воспользоваться следующим шаблоном из раздела «Дизайн» — «Портфолио».

Убираем лишние страницы

Первым делом избавимся от лишних страниц. В макете изначально под каждый проект созданы описания, которые загружаются при нажатии на картинки. Поэтому кликаете по любому изображению в коллаже и выбираете иконку настройки.

Здесь, во-первых, меняем параметр «При нажатии на фото» на значение «Открываются в новом окне», а во-вторых, скрываем показ заголовка.

Если выбрать во всплывающей панеле настроек пункт «Заменить фото», то вы попадете в загрузчик изображений для данного блока. В каждой картинке нужно убрать ссылки. Также в этом окне добавляете свои работы из портфолио.

Напоследок, просто удалите лишние страницы с сайта.

Анкорное меню для Wix лендинга

Шаг номер 2 — создаем анкорное меню. В принципе, существуют разные реализации: кто-то делает его сбоку, кто-то сверху. На этом шаблоне уже есть один пункт меню «Главная» в шапке, его и будем развивать. Для этого:

Кликаем по меню, выбираем пункт навигация.
Сбоку в открывшемся списке страниц добавляем новую, тип = ссылка.
Для ссылки указываем вариант «якорь» + определяем какая именно якорная ссылка должна срабатывать (тамже в окне можете увидеть полезный линк на статью «Как работать с якорями»).

В меню, разумеется, можно поменять и стиль оформления, если нужно.

Создадим еще один якорь для контактов, например. Нажимаете на иконку добавления нового элемента, выбираете последний пункт «Еще», где находите элемент якоря. Вставляем его перед блоком контактов и называем соответствующим образом.

После этого добавляете новую кнопку в меню, как мы это делали выше.

В качестве финального штриха создания лендинга в Wix — закрепим горизонтальную навигацию при прокрутке страницы. Для этого:

Подводите курсор к шапке сайта, не наводя при этом на меню — увидите надпись «Хедер».
Кликаете левой клавишей мышки, и появляется панель параметров хедера — выбираете настройки (иконку шестеренки).
В открывшемся окне активируете опцию «Зафиксировать хедер.»

Сохраняете все изменения и жмете кнопку «Опубликовать» в правом верхнем углу страницы. После этого сможете проверить как работает ваше меню. Оно должно перемещаться вместе с прокруткой и при клике перенаправлять пользователя на портфолио и контакты.

Дополнительные элементы

Чисто случайно наткнулись на один интересный элемент, который может пригодится вам в работе над лендинг пейдж в Wix. Речь пойдет о всплывающем окне. Выбираете в меню сервиса слева приложения из App Market (см. скриншот ниже), а затем в строке поиска пишете «popup». Нам нужен вариант «Lumifish Всплывающее окно».

Не смотря на то, что бесплатная базовая версия имеет некоторые ограничения, инструментом можно пользоваться для привлечения внимания посетителей. Часто с помощью таких вот всплывающих окон собирают подписчиков или акцентируют внимание на важной информации (акциях, розыгрышах и т.п.). В блоке настроек найдете парочку опций, которые можно менять: тексты, картинку, шрифты.

Жаль, в бесплатном варианте только 2 шаблона и нет возможности вставить ссылку, но в некоторых случаях обычного текста хватит. Есть настройки появления окна — раз в неделю/месяц или каждый раз для одного и того же посетителя при заходе на сайт.

А вообще среди приложений много интересных фишек — советую глянуть каталог популярных / избранных решений. Там найдете, например, социальные ссылки, счетчик, форму контактов, кнопку оплаты, карты и т.п. Однако не стоит забывать, что мы создавали именно Landing page в Wix, поэтому захламлять страницу лишними элементами не желательно.

В целом, работать с данным конструктором сайта достаточно просто. лучше всего попробовать сервис самостоятельно на практике — можете сделать это абсолютно бесплатно (в том числе и опубликовать свою страницу в онлайне). Если будут какие-то вопросы, обращайтесь в тех.поддержку или посмотрите Раздел помощь в редакторе.